<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
     .bg { background-color: yellow;}

     .s { 
        display: inline-block;
        border:1px solid blue;
        width:60px;
        height:60px;
        margin: 5px;
     }
     .red { background-color: red;}
    </style>
</head>
<body>
    数组不能用 下标去修改，失去响应式
    <div id="app">
        <h1> 电影票</h1>
        <div @click="buy(i)" :class="['s',{ red: s.state ==1}]" :key="s.id" v-for="s,i in seats">
            {{s.row +'-' + s.col}}
        </div>
        <h1>合计：{{total}}元</h1>
        <button @click="handle">购买</button>


        <ul>
            <li :class="k%2==1?'bg':''" :key="item" v-for="item,k in fruits">
                {{k}} --  {{item}}
            </li>
        </ul>
        <button @click="fruits.push('龙龟')"> 增加</button>
        <button @click="fruits[0]='德玛'"> 修改失败</button>
        <button @click="edit"> 修改</button>
        <button @click="del">删除</button>


        <h1> 循环 JSON 数组</h1>
        <ul>
            <li :key="h.id" v-for="h,i in heros">
              {{i}} -- {{h.ename}}
            </li>
        </ul>

        <h1> 循环对象</h1>
        <p v-for="v,k,i in obj">
            {{i}} --- {{k}} --{{ v}}
        </p>


    </div>
</body>
<script>

var vm = new Vue({
    el: "#app",
    data: {
        fruits:['apple', 'orange', 'banana','aaa','bbb','ccc','dddd'],
        heros: [{
          id: 1,
          ename: '龙龟',
          cname: '拉莫斯'
        },{
          id: 2,
          ename: '寡妇',
          cname: '伊芙林'
        },{
          id: 3,
          ename: '德邦',
          cname: '赵信'
        }],
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: '男'
        },
        // state =0 没人， =1已售
        seats:[
            {id:1,row:1,col:1,state:0},
            {id:2,row:1,col:2,state:0},
            {id:3,row:1,col:3,state:1},
            {id:4,row:1,col:4,state:1},
            {id:5,row:1,col:5,state:0},
            {id:6,row:1,col:6,state:0},
        ],
        total: 0 
    },
    methods:{
        edit(){
            this.$set( this.fruits,0,'苹果')     
        },
        del(){
            this.fruits.splice(3,1)
        },
        buy(i){
          console.log( '购买',i); 
          var v = this.seats[i].state;
          this.seats[i].state= (v+1)%2
        },
        handle(){
            let n = 0 ;
            for(s of this.seats){
                if(s.state ==1){
                    console.log( s );
                    n++;
                }
            }
            this.total = n*30;
        }
    }
});

</script>
</html>